<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				padding: 15px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

			p {
				margin: 30px 10px;
			}
			
			h2 {
				text-align: left;
				font-weight: bold;
				margin-bottom: 10px;
			}

			#list, #entertainment, #health, #romance {
				max-width: 800px;
			}

			#textimage {
				float: left;
				margin-right: 4px;
			}

			#paragraph {
				padding-left: 8px;
				margin: 0;
				text-align: justify;
				line-height: 18px;
			}
			
			#item1 .left {
				float: left;
				width: 82%;
			}
			
			#item1 .right {
				float: right;
				width: 18%;
			}
			
			#item1 .nokia-button {
				margin: 10px 30px;
			}
			
			#item3 .right {
				float: right;
			}
			
			#item3 .nokia-radiobox {
				float: left;
				margin-left: 10px
			}
			
			#item3 label {
				float: left;
				padding-top: 30px
			}
			
			#button_share {
				padding-top: 25px;
			}

			/* Overrides button class */
			.nokia-button-wrapper {
				margin: 5px auto;
			}
		</style>
		
	</head>

	<body>
		
		<h1>Nokia.CustomizableList - Sample</h1>

		<br/><br/>

		<div id="list"></div>

		<div id="item1" class="ui-helper-clearfix">
			
			<div class="left">
			
				<img src="images/car2_5.jpg" id="textimage" />
				
				<h2>Guarana</h2>
				
				<p id="paragraph">
					Guarana is climbing plant in maple family, native to the Amazon basin and especially common in Brazil.
				</p>
			
			</div>
			
			<div class="right">
			
				<span id="button_share" class="btn"></span>
			
			</div>

			<br style="clear:both;" />
		</div>

		<div id="item2" class="ui-helper-clearfix">
			<ul id="carousel">
			<li><img src="images/car1_1.jpg"/></li>
			<li><img src="images/car1_2.jpg"/></li>
			<li><img src="images/car1_3.jpg"/></li>
			<li><img src="images/car1_4.jpg"/></li>
			<li><img src="images/car1_5.jpg"/></li>
			<li><img src="images/car1_6.jpg"/></li>
			<li><img src="images/car1_7.jpg"/></li>
			<li><img src="images/car1_8.jpg"/></li>
			<li><img src="images/car1_9.jpg"/></li>
			<li><img src="images/car1_1.jpg"/></li>
			<li><img src="images/car1_2.jpg"/></li>
			<li><img src="images/car1_3.jpg"/></li>
			</ul>
		</div>

		<div id="item3" class="ui-helper-clearfix">
			<label>Gender</label>
			
			<div class="right">
				<input type="radio" name="radio" value="" id="radio1" />
				<input type="radio" name="radio" value="" id="radio2" />
			</div>
		</div>

		<script type="text/javascript" charset="utf-8">

			var init = function() {

				window.list = new Nokia.CustomizableList({
					element: '#list',
					visible: true,
					create: function() {
						console.log("Customizable List: Create");
					},
					show: function(openerTransitionList) {
						console.log("Customizable List: Show", openerTransitionList);
					},
					hide: function() {
						console.log("Customizable List: Hide list1.");
					},
					addItem: function(event, item) {
						console.log("Customizable List: AddItem", item);
					},
					removeItem: function(event, item) {
						console.log("Customizable List: RemoveItem", item);
					}
				});

				window.btn = new Nokia.Button({
					element: '#button',
					label: 'Remove',
					width: '100%',
					click: function() {
						list.removeItem('#item1');
					}
				});
				
				window.btnShare = new Nokia.Button({
					element: '#button_share',
					label: 'Share',
					width: '100px',
					height: '42px',
					click: function() {
						//
					}
				});
				
				window.carousel = new Nokia.Carousel({
					element: '#carousel',
					visibleItems: 9,
					itemDimensions: {
						width: 47,
						height: 47
					}
				});
				
				var radio1 = new Nokia.RadioBox({
					element: '#radio1',
					label: 'Male'
				});
		
				var radio2 = new Nokia.RadioBox({
					element: '#radio2',
					label: 'Female'
				});

				list.addItem('Content Title.');
				list.addItem('#item1');
				list.addItem('#item2');
				list.addItem('#item3');
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('button', 'carousel', 'customizablelist', 'radiobox', init);

		</script>

	</body>
</html>